<!--
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) 2023-present Kaleidos INC
-->

<ng-container *ngIf="model$ | async as vm">
  <ng-container *transloco="let t">
    <tg-ui-dtable>
      <tg-ui-dtable-row>
        <tg-ui-dtable-header class="user-column">{{
          t('common_members_tabs.column_user')
        }}</tg-ui-dtable-header>
        <tg-ui-dtable-header>{{
          t('project_settings.members.column_role')
        }}</tg-ui-dtable-header>
        <tg-ui-dtable-header class="action-column-header">
          <span class="header-row-action">
            {{ t('common_members_tabs.column_actions') }}
          </span>
        </tg-ui-dtable-header>
      </tg-ui-dtable-row>
      <ng-container *ngIf="!vm.loading">
        <ng-container
          *ngFor="let member of vm.members; trackBy: trackByUsername">
          <tg-ui-dtable-row
            [@conSlideInOut]="animationStatus"
            [ngClass]="{
              transparent: member.cancelled === 'active',
              active: activeMemberList.includes(member.data.user.username)
            }">
            <tg-ui-dtable-cell
              class="user"
              [@removeCell]="member.cancelled">
              <tg-user-card
                [user]="member.data.user"
                [isSelf]="member.data.user.username === vm.user?.username"
                [navigateToUser]="true"></tg-user-card>
            </tg-ui-dtable-cell>
            <tg-ui-dtable-cell [@removeCell]="member.cancelled">
              <tg-members-role-select
                [invitationOrMember]="member.data"
                [roles]="vm.roles"
                [isMember]="true"
                [isSelf]="
                  member.data.user.username === vm.user?.username
                "></tg-members-role-select>
            </tg-ui-dtable-cell>
            <tg-ui-dtable-cell
              [@removeCell]="member.cancelled"
              (@removeCell.done)="setBtnFocus()"
              class="action-column">
              <tg-remove-member
                [roles]="vm.roles"
                [project]="vm.project"
                [user]="vm.user"
                [member]="member.data"
                (confirmed)="onConfirmRemoveMember($event, member.data)"
                (dropdownStateChanged)="
                  addToActiveMemberList($event, member.data)
                ">
              </tg-remove-member>
            </tg-ui-dtable-cell>

            <div
              *ngIf="member.cancelled === 'active'"
              [@showUndo]
              class="countdown">
              <tg-ui-context-notification
                data-test="undo-remove"
                alertLevel="none"
                status="info">
                <div class="countdown-wrapper">
                  <span>
                    {{
                      t('project_settings.members.remove.remove_member', {
                        member: member.data.user.fullName
                      })
                    }}
                  </span>
                  <button
                    #undoButton
                    class="undo"
                    data-test="undo-remove-member"
                    tuiLink
                    (click)="undoRemove(member.data)"
                    appearance="tertiary">
                    {{ t('project_settings.members.undo') }}
                  </button>
                </div>
              </tg-ui-context-notification>
            </div>
            <div
              *ngIf="member.undo"
              [@undoDone]
              class="action-undo">
              <tg-ui-context-notification
                alertLevel="none"
                status="info">
                <div class="countdown-wrapper">
                  <span>
                    {{ t('project_settings.members.action_undone') }}
                  </span>
                  <button
                    class="close-button no-padding"
                    size="m"
                    appearance="action-button"
                    [attr.aria-label]="
                      t('project_settings.members.close_undone')
                    "
                    tuiIconButton
                    icon="close"
                    (click)="removeUndoneDoneAnimation(member.data)"></button>
                </div>
              </tg-ui-context-notification>
            </div>
          </tg-ui-dtable-row>
        </ng-container>
      </ng-container>
      <ng-container *ngIf="vm.loading">
        <tg-ui-dtable-row
          *ngFor="
            let i of [].constructor(MEMBERS_PAGE_SIZE);
            trackBy: trackByIndex
          ">
          <tg-ui-dtable-cell>
            <tg-ui-user-skeleton></tg-ui-user-skeleton>
          </tg-ui-dtable-cell>
          <tg-ui-dtable-cell></tg-ui-dtable-cell>
          <tg-ui-dtable-cell></tg-ui-dtable-cell>
        </tg-ui-dtable-row>
      </ng-container>
    </tg-ui-dtable>

    <tg-members-pagination
      *ngIf="vm.total"
      [total]="vm.total"
      [pageStart]="vm.pageStart"
      [pageEnd]="vm.pageEnd"
      [hasPreviousPage]="vm.hasPreviousPage"
      [hasNextPage]="vm.hasNextPage"
      (next)="next()"
      (previous)="prev()">
    </tg-members-pagination>
  </ng-container>
</ng-container>
